<%@ page language="java" contentType="text/html;charset=UTF-8"
	pageEncoding="utf-8"%>
<html>
<head>
	<meta charset="UTF-8">
	<title>mamadi</title>
	<link rel="stylesheet" type="text/css" href="css/common.css">
</head>
<body>
	<div class="wrapper">
		<div class="header">
			<div class="heading">
				<div class="logo">
					Hi,I am logo.<br/>
					嗨,我是麻麻的。
				</div>
				<div class="sertch-box">
					<input type="text" placeholder="输入关键字" />
					<span class="btn search-btn">搜索</span>
				</div>
			</div>
		</div>
		<div class="content">
			<div class="list">
				<div class="row list-header">
					<div class="item">
						ID
					</div>
					<div class="item">
						姓名
					</div>
					<div class="item">
						性别
					</div>
					<div class="item">
						出生年月
					</div>
					<div class="item">
						电话号码
					</div>
					<div class="item">
						操作
					</div>
				</div>
			</div>
			<div class="btn-box add">
				<div class="btn">增加新客户</div>
			</div>
		</div>
		<div class="footer"></div>
	</div>
</body>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript">
	var clientArray = new Array();
		if(localStorage.getItem("client") != null) {
			clientArray = JSON.parse(localStorage.getItem("client"));
			$(".list").empty();
			var s = "";
			    s += '<div class="row list-header">';
				s += '<div class="item">';
				s += 'ID';
				s += '</div>';
				s += '<div class="item">';
				s += '姓名';
				s += '</div>';
				s += '<div class="item">';
				s += '性别';
				s += '</div>';
				s += '<div class="item">';
				s += '出生年月';
				s += '</div>';
				s += '<div class="item">';
				s += '电话号码';
				s += '</div>';
				s += '<div class="item">';
				s += '操作';
				s += '</div>';
				s += '</div>';
				for(var i = 0; i < clientArray.length; i++) {
					s += '<div class="row">';	
					s += '<div class="item">';
					s += clientArray[i].id;
					s += '</div>';
					s += '<div class="item">';
					s += clientArray[i].attr1;
					s += '</div>';
					s += '<div class="item">';
					s += clientArray[i].attr2;
					s += '</div>';
					s += '<div class="item">';
					s += clientArray[i].attr3;
					s += '</div>';
					s += '<div class="item">';
					s += clientArray[i].attr4;
					s += '</div>';
					s += '<div class="item">';
					s += '<div class="btn-box">';
					s += '<div class="btn del-btn">删除</div>';
					s += '<div class="btn edit-btn">管理</div>';
					s += '<input type="hidden" class="id" value="' + i + '">';
					s += '</div>';
					s += '</div>';
					s += '</div>';
				}
			$(".list").append(s);
		}
		else {
			$(".list").empty();
			var s = "";
			    s += '<div class="row list-header">';
				s += '<div class="item">';
				s += 'ID';
				s += '</div>';
				s += '<div class="item">';
				s += '姓名';
				s += '</div>';
				s += '<div class="item">';
				s += '性别';
				s += '</div>';
				s += '<div class="item">';
				s += '出生年月';
				s += '</div>';
				s += '<div class="item">';
				s += '电话号码';
				s += '</div>';
				s += '<div class="item">';
				s += '操作';
				s += '</div>';
				s += '</div>';
			$(".list").append(s);
			$(".list").append("<div class='msg'>暂无数据</div>");
		}
	$(document).ready(function() {
		var itemNum = 6;

		$(".add .btn").click(function() {
			addRow(itemNum, "client");
			$(".new-row").children(".item").eq(4).find("input").attr("onpropertychange", "isNum(this)");
			$(".new-row").children(".item").eq(4).find("input").attr("oninput", "isNum(this)");
			$(".new-row").children(".item").eq(4).find("input").attr("onblur", "isEleven(this)");
		});
	});

	$(document).on("click", ".edit-btn",function() {
		var index = parseInt($(this).parent(".btn-box").find(".id").val());
		$(this).parents(".row").children(".item").eq(1).html("<input onpropertychange='' oninput='' type='text' value=" + clientArray[index].attr1 + ">");
		$(this).parents(".row").children(".item").eq(2).html("<input onpropertychange='' oninput='' type='text' value=" + clientArray[index].attr2 + ">");
		$(this).parents(".row").children(".item").eq(3).html("<input onpropertychange='' oninput='' type='text' value=" + clientArray[index].attr3 + ">");
		$(this).parents(".row").children(".item").eq(4).html("<input onpropertychange='isNum(this)' oninput='isNum(this)' onblur='isEleven(this)' type='text' value=" + clientArray[index].attr4 + ">");

		$(this).parent(".btn-box").append('<div class="btn cancel-btn">取消</div><div class="btn save-btn">保存</div>');
		$(this).hide();
		$(this).prev().hide();
	});

	$(document).on("click", ".save-btn", function() {
		var index = parseInt($(this).parent(".btn-box").find(".id").val());
		if(clientArray[index] == "" || clientArray[index] == null || clientArray[index] == "undefined") {
			$newItem = $(this).parents(".new-row").children(".item");
			var param = {};

			param["id"] = $newItem.eq(0).text();
			for(i = 1; i < 5; i++) {
				$input = $newItem.eq(i).children("input");
				param[$input.attr("name")] = $input.val();
			}
			console.log(param);
			clientArray.push(param);
			localStorage.setItem("client", JSON.stringify(clientArray));

			$(this).parent(".btn-box").append('<div class="btn del-btn">删除</div><div class="btn edit-btn">管理</div>');
			$(this).hide();
			$(this).prev().hide();
			window.location.reload();
		}
		else {
			clientArray[index].attr1 = $(this).parents(".row").children(".item").eq(1).find("input").val();
			clientArray[index].attr2 = $(this).parents(".row").children(".item").eq(2).find("input").val();
			clientArray[index].attr3 = $(this).parents(".row").children(".item").eq(3).find("input").val();
			clientArray[index].attr4 = $(this).parents(".row").children(".item").eq(4).find("input").val();
			localStorage.setItem("client", JSON.stringify(clientArray));

			$(this).parent(".btn-box").append('<div class="btn del-btn">删除</div><div class="btn edit-btn">管理</div>');
			$(this).hide();
			$(this).prev().hide();
			window.location.reload();
		}
	});

	$(document).on("click", ".cancel-btn", function() {
		if($(this).parents(".new-row").length != 0) {
			$(this).parents(".new-row").remove();
		}
		else {
			var index = parseInt($(this).parent(".btn-box").find(".id").val());
			$(this).parents(".row").children(".item").eq(1).html(clientArray[index].attr1);
			$(this).parents(".row").children(".item").eq(2).html(clientArray[index].attr2);
			$(this).parents(".row").children(".item").eq(3).html(clientArray[index].attr3);
			$(this).parents(".row").children(".item").eq(4).html(clientArray[index].attr4);
			$(this).parent(".btn-box").append('<div class="btn del-btn">删除</div><div class="btn edit-btn">管理</div>');
			$(this).hide();
			$(this).next().hide();
		}
	});

	$(document).on("click", ".del-btn", function() {
		if(confirm("确定要删除？")) {
			var delId = parseInt($(this).parents(".row").find(".id").val());
			clientArray.remove(delId);

			if(clientArray == null || clientArray.length == 0 || clientArray == "") {
				localStorage.removeItem("client");
			}
			else {
				localStorage.setItem("client", JSON.stringify(clientArray));
			}
			window.location.reload();
		}
	});

	$(document).on("click", ".search-btn", function() {
		if(clientArray.length != 0) {
			var keyWord = $(this).prev().val();
			var flag = 0;
			$(".list").empty();
			$(".add").hide();
			var s = "";
			    s += '<div class="row list-header">';
				s += '<div class="item">';
				s += 'ID';
				s += '</div>';
				s += '<div class="item">';
				s += '姓名';
				s += '</div>';
				s += '<div class="item">';
				s += '性别';
				s += '</div>';
				s += '<div class="item">';
				s += '出生年月';
				s += '</div>';
				s += '<div class="item">';
				s += '电话号码';
				s += '</div>';
				s += '<div class="item">';
				s += '操作';
				s += '</div>';
				s += '</div>';
			for(var i = 0; i < clientArray.length; i++) {
				if(clientArray[i].attr1 == keyWord || clientArray[i].attr2 == keyWord || clientArray[i].attr3 == keyWord || clientArray[i].attr4 == keyWord) {
					s += '<div class="row">';	
					s += '<div class="item">';
					s += clientArray[i].id;
					s += '</div>';
					s += '<div class="item">';
					s += clientArray[i].attr1;
					s += '</div>';
					s += '<div class="item">';
					s += clientArray[i].attr2;
					s += '</div>';
					s += '<div class="item">';
					s += clientArray[i].attr3;
					s += '</div>';
					s += '<div class="item">';
					s += clientArray[i].attr4;
					s += '</div>';
					s += '<div class="item">';
					s += '<div class="btn-box">';
					s += '<div class="btn del-btn">删除</div>';
					s += '<div class="btn edit-btn">管理</div>';
					s += '<input type="hidden" class="id" value="' + i + '">';
					s += '</div>';
					s += '</div>';
					s += '</div>';
					flag = 1;
				}
			}
			$(".list").append(s);
			if(flag == 0) {
				alert("没你要的喔");
			}
		}
		else {
			alert("都没记录，干嘛呀你");
		}
	});
</script>
</html>